<template>
  <div class="navPage">
        <div class="headerImg">
            <img class="cImg" src=" https://img.xiaopiu.com/userImages/img315969455ab0.jpg">
        </div>
        <div class="userName">jack</div>
        <div class="alink">
            <a href="./authorDetail.html">个人信息</a>
            <a href="./mySubscription.html">我的订阅</a>
            <a href="./Initiate.html">发起众筹</a>
            <div class="bottomLink">
            <router-link to="/Login">登录</router-link>
            <router-link to="/Register">/注册</router-link>
            
            </div>
        </div>
        <button type="button" class='exit'>退出登录</button>
    </div>
</template>

<script>
export default {
  name: "navPage",
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@charset "UTF_8";
body {
    background: rgba(255, 255, 255, 1);
    padding: 0 .2rem;
}

.navPage {
    text-align: center;
    color: #505050;
}

.headerImg .cImg {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    margin-top: .4rem;
}

.userName {
    margin: .2rem;
    font-size: .6rem;
}

.alink a {
    display: block;
    font-size: .6rem;
    margin:.3rem 0;
    letter-spacing: .1rem;
}
.exit{
    border-radius: 0.085rem;
    width: 4.468rem;
    height: 1.024rem;
    background-color: rgba(80, 80, 80, 1);
    color:#fff;
    font-size: .5rem;
    margin-top: .3rem;
}
.bottomLink{
    display: flex;
    text-align: center;
    width: 3.3rem;
    margin:0 auto;
    justify-content:space-around;
}
.bottomLink a{
    margin:0
}
</style>
